<template>
    <div class="content">
        <div class="header" id="age" >
        <h2 class="h2_a" :id="stage==2?'input_none':'input_block'"><a  href="javascript:;" >菜谱</a></h2>
        <div class="input" :id="stage==1?'input_none':'input_block'">
            <div class="img2">
                <a href="javascript:;" v-on:click="go_back(indexadd)"><img src="@/assets/img/商品详情/images/images/images/images/商品详情1_01_03.png" alt=""></a>
                <input type="text" >
            </div>
        </div>
        <div class="header_img" :id="stage==2?'input_none':'input_block'" v-on:click="header_img1(1)">
            <a href="javascript:;"><img src="@/assets/img/菜铺/images/菜谱_03_05.png" alt=""></a>
        </div>
        </div>
        <div class="navone" >
        <ul class="navMenu">
            <li class="lefte">
                <a href="javascript:;">
                    <div class="lefte_img">
                        <img src="@/assets/img/发布/发布_03.png" alt="">
                    </div>
                    <p id="add1">西餐</p>
                </a>
            </li>
            <li class="lefte">
                <a href="javascript:;">
                    <div class="lefte_img">
                        <img src="@/assets/img/发布/发布_03.png" alt="">
                    </div>
                    <p id="add1">西餐</p>
                </a>
            </li>
            <li class="lefte">
                <a href="javascript:;">
                    <div class="lefte_img">
                        <img src="@/assets/img/发布/发布_03.png" alt="">
                    </div>
                    <p id="add1">西餐</p>
                </a>
            </li>
            <li class="lefte">
                <a href="javascript:;">
                    <div class="lefte_img">
                        <img src="@/assets/img/发布/发布_03.png" alt="">
                    </div>
                    <p id="add1">西餐</p>
                </a>
            </li>
            <li class="lefte">
                <a href="javascript:;">
                    <div class="lefte_img">
                        <img src="@/assets/img/发布/发布_03.png" alt="">
                    </div>
                    <p id="add1">西餐</p>
                </a>
            </li>
            <li class="lefte">
                <a href="javascript:;">
                    <div class="lefte_img">
                        <img src="@/assets/img/发布/发布_03.png" alt="">
                    </div>
                    <p id="add1">西餐</p>
                </a>
            </li>
            <li class="lefte">
                <a href="javascript:;">
                    <div class="lefte_img">
                        <img src="@/assets/img/发布/发布_03.png" alt="">
                    </div>
                    <p id="add1">西餐</p>
                </a>
            </li>
            <li class="lefte">
                <a href="javascript:;">
                    <div class="lefte_img">
                        <img src="@/assets/img/发布/发布_03.png" alt="">
                    </div>
                    <p id="add1">西餐</p>
                </a>
            </li>
            <li class="lefte">
                <a href="javascript:;">
                    <div class="lefte_img">
                        <img src="@/assets/img/发布/发布_03.png" alt="">
                    </div>
                    <p id="add1">西餐</p>
                </a>
            </li>
        </ul>
        </div>
        <div class="contentMenu">
            <h2><a href="javascript:;" id="a">最新菜品</a></h2>
            <ul class="bottomMenu">
                <li class="left" @click='checkVideoFun(item.video)'>
                    <a href="/DetailPage">
                        <p>视频</p>
                        <img src="@/assets/img/菜铺/菜谱_10.png" alt="">
                        <div class="img">
                            <img src="@/assets/img/菜铺/播放 (1).png" alt="">
                        </div>
                    </a>
                </li>
                <li class='right'>
                    <a href="/DetailPage">
                        <h2>简单制作蛋包饭</h2>
                        <p class="right_p">
                            蛋包饭是很做人的心头爱，怎么在 家里制作美味的蛋包饭呢？我们...
                        </p>
                    </a>
                    <div class="bottom1">
                        <a href="JavaScript:;">
                            <p id="src3">{{num1}}</p><span>收藏</span>
                        </a>
                        <a @click="showMsg1" href="javascript:;" class="a">
                            <img id="img3"  :src="src1"  alt="">
                        </a>
                    </div>
                </li>
            </ul>
            <ul class="bottomMenu">
                <li class="left">
                    <a href="/DetailPage">
                        <p>视频</p>
                        <img src="@/assets/img/菜铺/菜谱_10.png" alt="">
                        <div class="img">
                            <img src="@/assets/img/菜铺/播放 (1).png" alt="">
                        </div>
                    </a>
                </li>
                <li class='right'>
                    <a href="/DetailPage">
                        <h2>简单制作蛋包饭</h2>
                        <p class="right_p">
                            蛋包饭是很做人的心头爱，怎么在 家里制作美味的蛋包饭呢？我们...
                        </p>
                    </a>
                    <div class="bottom1">
                        <a href="JavaScript:;">
                            <p id="src4">{{num2}}</p><span>收藏</span>
                        </a>
                        <a @click="showMsg2" href="javascript:;" class="a">
                            <img id="img2"  :src="src2"  alt="">
                        </a>
                    </div>
                </li>
            </ul>
        </div>
        <div class="contentMenu content1">
            <h2><a href="javascript:;" id="a">最新菜品</a></h2>
            <ul class="bottomMenu">
                <li class="left">
                    <a href="/DetailPage">
                        <p>视频</p>
                        <img src="@/assets/img/菜铺/菜谱_10.png" alt="">
                        <div class="img">
                            <img src="@/assets/img/菜铺/播放 (1).png" alt="">
                        </div>
                    </a>
                </li>
                <li class='right'>
                    <a href="/DetailPage">
                        <h2>简单制作蛋包饭</h2>
                        <p class="right_p">
                            蛋包饭是很做人的心头爱，怎么在 家里制作美味的蛋包饭呢？我们...
                        </p>
                    </a>
                    <div class="bottom1">
                        <a href="JavaScript:;">
                            <p id="src3">{{num3}}</p><span>收藏</span>
                        </a>
                        <a @click="showMsg3" href="javascript:;" class="a">
                            <img id="img3"  :src="src3"  alt="">
                        </a>
                    </div>
                </li>
            </ul>
            <ul class="bottomMenu">
                <li class="left">
                    <a href="/DetailPage">
                        <p>视频</p>
                        <img src="@/assets/img/菜铺/菜谱_10.png" alt="">
                        <div class="img">
                            <img src="@/assets/img/菜铺/播放 (1).png" alt="">
                        </div>
                    </a>
                </li>
                <li class='right'>
                    <a href="/DetailPage">
                        <h2>简单制作蛋包饭</h2>
                        <p class="right_p">
                            蛋包饭是很做人的心头爱，怎么在 家里制作美味的蛋包饭呢？我们...
                        </p>
                    </a>
                    <div class="bottom1">
                        <a href="JavaScript:;">
                            <p id="src4">{{num4}}</p><span>收藏</span>
                        </a>
                        <a @click="showMsg4" href="javascript:;" class="a">
                            <img id="img4"  :src="src4"  alt="">
                        </a>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</template>
<script>
import imgmenu1 from "@/assets/img/底部/发布-恢复的_10.png";
import imgmenu2 from "@/assets/img/底部/images/收藏_05.png";
export default {
    name:'HostMenu',
    data(){
        return{
            indexadd:1,
            stage:1,
            num1:560,
            num2:560,
            num3:560,
            num4:560,
             a1 : 0,
             a2 : 0,
             a3: 0,
             a4 : 0,
             src1:imgmenu1,
             src2:imgmenu1,
             src3:imgmenu1,
             src4:imgmenu1,
        }
    },
    methods: {
            showMsg1:function(event){
    console.log(this.num);
    if (this.a1 % 2 === 0) {
        
        this.src1=imgmenu2;
        this.num1+=1;
        this.a1+=1;
        console.log(a);
        console.log("fff")
    } else {
        this.src1=imgmenu1;
        this.num1-=1;
        this.a1-=1;
        console.log(a);
        console.log("ddd")

    }
            },
            showMsg2:function(event){
    console.log(this.num);
    if (this.a2 % 2 === 0) {
        
        this.src2=imgmenu2;
        this.num2+=1;
        this.a2+=1;
        console.log(a);
        console.log("fff")
    } else {
        this.src2=imgmenu1;
        this.num2-=1;
        this.a2-=1;
        console.log(a);
        console.log("ddd")

    }
            },
            showMsg3:function(event){
    console.log(this.num);
    if (this.a3 % 2 === 0) {
        
        this.src3=imgmenu2;
        this.num3+=1;
        this.a3+=1;
        console.log(a);
        console.log("fff")
    } else {
        this.src3=imgmenu1;
        this.num3-=1;
        this.a3-=1;
        console.log(a);
        console.log("ddd")

    }
            },
            showMsg4:function(event){
    console.log(this.num);
    if (this.a4 % 2 === 0) {
        
        this.src4=imgmenu2;
        this.num4+=1;
        this.a4+=1;
        console.log(a);
        console.log("fff")
    } else {
        this.src4=imgmenu1;
        this.num4-=1;
        this.a4-=1;
        console.log(a);
        console.log("ddd")

    }
    },
     go_back:function(event){
        this.stage=1;
        console.log("asdasd")
        },
    header_img1:function(event){
        this.stage=2;
        console.log("asdasd")
    }
    
        },
       


}
</script>
<style lang="">
#input_none{
    display: none;
}
#input_block{
    display: block;
}
    a{
    text-decoration: none;
    color: #000;
}
li{
    list-style-type: none;
}
body{
    /* width: 100%; */
    margin: 0;
    padding: 0;
}
.content{
    width: 100%;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	flex-wrap: nowrap;
	align-items:flex-start;
	align-content:space-around
	/* background-color: aqua; */
}
.header{
    width: 100%;
    height: 3rem;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    text-align: center;
    align-items: center;
    margin: 0;
    padding: 0;
    /* margin-bottom: -1rem; */
}
.header .h2_a{
    margin: -0;
    width: 20%;
    display: flex;
    align-items: center;
    text-align: center;
    font-weight: 500;
    padding-left: 5%;
    letter-spacing: 3px;
    font-size: 25px;
}
.header .h2_a a{
    font-size:1rem;
}
.header .input{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    /* margin-top: 3%; */
    width: 100%;
    display: none;
}
.header .img2{
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    width: 100%;
    margin: 0;
    padding: 0;
}
.header .img2 a{
    width: 15%;
}
.header .img2 a img{
    margin-top: 10%;
    width: 1rem;
    height: 1rem;
    margin-right: 1rem;
}
.header input{
    width: 70%;
    height: 1rem;
    /* line-height: 2rem; */
    outline: none;
    border-radius: 2rem;
    /* margin-left: 0.5rem; */
    margin-right: 0.5rem;
}
.header_img{
    line-height: 5.9rem;
    text-align: center;
    width: 20%;
    
}
.header_img img:nth-child(1){
    
    width: 65%;
    height: 37%;
}   
.header .header_img a{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.header .header_img a img{
    width: 1rem;
    height: 1rem;
}


.navone{
   
    padding-top: 5%;
    padding-bottom: 5%;
    width: 100%;
    /* height: 8rem; */
    overflow: hidden;
}

.navone .navMenu{
    width: 100%;
    height: 5rem;
    margin-bottom: 0;
    white-space: nowrap;
    overflow-y: auto;
    /* margin-left: -2rem; */
    margin: 0;
    padding: 0;
}
.navone .navMenu .nav_bottom{
    margin-top:10px;
    margin-bottom: 0;
    margin-left: -60px;
    justify-content: center;
    display: flex;
    flex-direction: row;
}
.navone .navMenu .nav_bottom li{
    border-radius: 20%;
    margin-left: 5px;
    width: 5px;
    height: 5px;
    background-color: #2cd2b9;
    list-style: none;
    border-radius: 10px;
}

.navone .navMenu .lefte{
    
	display: inline-block;
	border-radius: 50%;	
	width: 4rem;
	height: 4rem;
	text-align: center;
    white-space:nowrap;
	margin-left: 2%;
	background-color: #2cd2b9;
	/* background-color: teal; */
}
.navone .navMenu .lefte:nth-child(2){
    background-color: #ff8787;
}
.navone .navMenu .lefte:nth-child(3){
    background-color: #3bc9db;
}
.navone .navMenu .lefte:nth-child(4){
    background-color: #ffa94d;
}

.navone .navMenu .lefte .lefte_img{
	padding-top: 10%;
	width: 100%;
	text-align: center;
	height: 50%;
}
.navone .navMenu .lefte .lefte_img img{
	width: 50%;
	height: 100%;
}

.navone .navMenu .lefte .lefte a #add1{
    margin: 0;
    padding: 0;
}


.navone .navMenu .lefte a{
	letter-spacing: 3px;
	display: inline-block;
	width: 100%;
	padding-top: .3125rem;
	font-size: 1rem;
	text-align: center;
}
.navone .navMenu .lefte a p{
    margin: 0;
    padding: 0;
    font-size: 0.7rem;
}

 .contentMenu{
    
    padding-left: 5%;
    padding-right: 5%;
    display: flex;
    flex-direction: column;
    
}
.content1{
    margin-bottom: 5rem;
}
.content .contentMenu h2{
    margin-top: 0;
    margin-bottom: 10px;
}
.contentMenu h2 a{
    float: left;
    font-size: 1rem;
}
.contentMenu .bottomMenu{
    /* margin-left: -2.7rem; */
    width: 100%;
    height: 100%;
    display: flex;
    margin-top: 0;
    flex-direction: row;
    padding: 0;
    margin: 0;
    padding-bottom: 4%;
}
.contentMenu .bottomMenu .left p{
    margin-top: -0.05%;
    margin-left: 1%;
    position: absolute;
    left: 0;
    top: 0;
    color: #fff;
    font-size: 0.6rem;
}
.contentMenu .bottomMenu .left{
    position: relative;
    list-style: none;
}
.contentMenu .bottomMenu .left img{

    width: 5rem;
    height: 5rem;
}
.contentMenu .bottomMenu .left .img{
    border: 1px solid #fff;
    border-radius: 50%;
    line-height: 0.8rem;
    width: 1.5rem;
    height: 1.5rem;
    position: absolute;
    /* margin-top: 0;
    margin-left: -25px; */
    left: 1.7rem;
    top: 1.7rem;
    background-color: #92938e;
}
.contentMenu .bottomMenu .left .img img{
    padding-left: 10%;
    padding-top: 20%;
    width: 60%;
    height: 60%;
}
.contentMenu .bottomMenu .right{
    width: 100%;
    /* height: ; */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.contentMenu .bottomMenu .right h2{
    float: left;
    margin-bottom: 10%;
    -webkit-line-clamp: 2;
    letter-spacing: 1px;
    margin-top: -1%;
    padding-left: 10%;
    font-weight: 700;
    font-size: 0.7rem;
}
.contentMenu .bottomMenu .right_p{
    /* background-color: #ff8787; */
    padding-left: 10%;
    margin-top: -5px;
    font-size: 0.4rem;
    margin-bottom: 0;
    float: left;
    text-align: left;
}
.contentMenu .bottomMenu .right .bottom1{
    /* height: 3rem; */
    margin-top: 0;
    margin-bottom: 0;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
.contentMenu .bottomMenu .right .bottom1 a{
    float: left;
    width: 67%;
    font-size: 14px;
    margin: 0;
    padding-left: 10%;
    text-align: left;
    
}
.contentMenu .bottomMenu .right .bottom1 a p{
    /* width: 2rem; */
    margin: 0;    
    /* height: 3rem; */
    padding: 0;
    /* line-height: 3rem; */
    display: inline-block;
   text-align: center;
   margin-right: 0.2rem;
   /* padding-top: 0.5rem; */
   /* margin-top: -0.5rem; */
}
.contentMenu .bottomMenu .right .bottom1 a span{
    margin-left: -0.2rem;
   /* margin-top: -0.5rem; */
}
.contentMenu .bottomMenu .right .bottom1 img{
    /* margin-top: 3%;
    margin-right: 10px; */
    width: 1rem;
    height: 1rem;
    padding-left: 2rem;
}
.contentMenu .bottomMenu .right .bottom1 .a{
    width: 3.5rem;
    /* height: 3rem; */
    /* line-height: 5.2rem; */
    
}
</style>